import styled from 'styled-components';
import imgSrc from 'assets/images/chippy_600.png';
import {Theme} from 'src/utils/themes';
import {getDarkenedColor} from 'src/utils/color-math';
import {getSelectedTheme} from 'src/store/settingsSlice';
import {useAppSelector} from 'src/store/hooks';
import  { useState } from 'react';
import './chippy-loader.css'; // 导入 CSS 文件
const defaultChippy = {
  width: 600,
  height: 300,
  src: imgSrc,
};

const LoaderContainer = styled.div`
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
`;

// const CircleContainer = styled.div<{
//   $containerHeight: number;
//   $containerWidth: number;
//   $progress: number | null;
//   $progressColor: string;
// }>`
//   border-radius: 50%;
//   background-color: var(--bg_icon);
//   height: ${(props) => props.$containerHeight}px;
//   width: ${(props) => props.$containerWidth}px;
//   position: relative;
//   overflow: hidden;
//   box-sizing: border-box;
//   display: flex;
//   align-items: center;
//   justify-content: center;

//   animation-duration: 1.5s;
//   animation-name: roll;
//   animation-iteration-count: infinite;
//   animation-direction: alternate;
//   animation-timing-function: ease-in-out;

//   &::after {
//     height: ${(props) => props.$containerHeight}px;
//     width: ${(props) => props.$containerWidth}px;
//     position: absolute;
//     content: '';
//     background-color: ${(p) => p.$progressColor};
//     top: ${(props) => props.$containerHeight + 1}px;
//     left: 0;
//     right: 0;
//     transition: transform 0.4s ease-out;
//     transform: translate3d(
//       0,
//       ${(props) => -(props.$progress || 0) * props.$containerHeight}px,
//       0
//     );
//   }
// `;

const CircleContainer = styled.div<{
  $containerHeight: number;
  $containerWidth: number;
  $progress: number | null;
  $progressColor: string;
}>`
  border-radius: 3%;
  background-color: transparent;
  height: ${(props) => props.$containerHeight}px;
  width: ${(props) => props.$containerWidth}px;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;

  /* 去掉动画效果 */
  /* animation-duration: 1.5s;
  animation-name: roll;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: ease-in-out; */
`;

type Props = {
  progress: number | null;
  width?: number;
  height?: number;
  theme: Theme;
};

const SvgComponent: React.FC = () => {
  const [hovered, setHovered] = useState(false);
  return (
    <svg
    width="600"
      height="260"
      viewBox="0 0 600 260"
      xmlns="http://www.w3.org/2000/svg"
      className={`icon-twi-code ${hovered ? 'hover' : ''}`}
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
    >
      {/* 第一行 */}
      <rect x="5" y="5" width="40" height="40" style={{ fill: "none", stroke: "#30A3DF", strokeWidth: 2 }} />
      <rect x="50" y="5" width="40" height="40" style={{ fill: "none", stroke: "#30A3DF", strokeWidth: 2 }} />
      <rect x="95" y="5" width="40" height="40" style={{ fill: "none", stroke: "#30A3DF", strokeWidth: 2 }} />
      <rect x="140" y="5" width="40" height="40" style={{ fill: "none", stroke: "#30A3DF", strokeWidth: 2 }} />
      <rect x="185" y="5" width="40" height="40" style={{ fill: "none", stroke: "#30A3DF", strokeWidth: 2 }} />
      <rect x="230" y="5" width="40" height="40" style={{ fill: "none", stroke: "#30A3DF", strokeWidth: 2 }} />
      <rect x="275" y="5" width="40" height="40" style={{ fill: "none", stroke: "#30A3DF", strokeWidth: 2 }} />
      <rect x="320" y="5" width="40" height="40" style={{ fill: "none", stroke: "#30A3DF", strokeWidth: 2 }} />
      <rect x="365" y="5" width="40" height="40" style={{ fill: "none", stroke: "#30A3DF", strokeWidth: 2 }} />
      <rect x="410" y="5" width="40" height="40" style={{ fill: "none", stroke: "#30A3DF", strokeWidth: 2 }} />
      <rect x="455" y="5" width="40" height="40" style={{ fill: "none", stroke: "#30A3DF", strokeWidth: 2 }} />
      <rect x="500" y="5" width="95" height="40" style={{ fill: "none", stroke: "#30A3DF", strokeWidth: 2 }} />

      {/* 第二行 */}
      <rect x="5" y="50" width="60" height="40" style={{ fill: "none", stroke: "#30A3DF", strokeWidth: 2 }} />
      <rect x="70" y="50" width="40" height="40" style={{ fill: "none", stroke: "#30A3DF", strokeWidth: 2 }} />
      <rect x="115" y="50" width="40" height="40" style={{ fill: "none", stroke: "#30A3DF", strokeWidth: 2 }} />
      <rect x="160" y="50" width="40" height="40" style={{ fill: "none", stroke: "#30A3DF", strokeWidth: 2 }} />
      <rect x="205" y="50" width="40" height="40" style={{ fill: "none", stroke: "#30A3DF", strokeWidth: 2 }} />
      <rect x="250" y="50" width="40" height="40" style={{ fill: "none", stroke: "#30A3DF", strokeWidth: 2 }} />
      <rect x="295" y="50" width="40" height="40" style={{ fill: "none", stroke: "#30A3DF", strokeWidth: 2 }} />
      <rect x="340" y="50" width="40" height="40" style={{ fill: "none", stroke: "#30A3DF", strokeWidth: 2 }} />
      <rect x="385" y="50" width="40" height="40" style={{ fill: "none", stroke: "#30A3DF", strokeWidth: 2 }} />
      <rect x="430" y="50" width="40" height="40" style={{ fill: "none", stroke: "#30A3DF", strokeWidth: 2 }} />
      <rect x="475" y="50" width="40" height="40" style={{ fill: "none", stroke: "#30A3DF", strokeWidth: 2 }} />
      <rect x="520" y="50" width="75" height="40" style={{ fill: "none", stroke: "#30A3DF", strokeWidth: 2 }} />

      {/* 第三行 */}
      <rect x="5" y="95" width="70" height="40" style={{ fill: "none", stroke: "#30A3DF", strokeWidth: 2 }} />
      <rect x="80" y="95" width="40" height="40" style={{ fill: "none", stroke: "#30A3DF", strokeWidth: 2 }} />
      <rect x="125" y="95" width="40" height="40" style={{ fill: "none", stroke: "#30A3DF", strokeWidth: 2 }} />
      <rect x="170" y="95" width="40" height="40" style={{ fill: "none", stroke: "#30A3DF", strokeWidth: 2 }} />
      <rect x="215" y="95" width="40" height="40" style={{ fill: "none", stroke: "#30A3DF", strokeWidth: 2 }} />
      <rect x="260" y="95" width="40" height="40" style={{ fill: "none", stroke: "#30A3DF", strokeWidth: 2 }} />
      <rect x="305" y="95" width="40" height="40" style={{ fill: "none", stroke: "#30A3DF", strokeWidth: 2 }} />
      <rect x="350" y="95" width="40" height="40" style={{ fill: "none", stroke: "#30A3DF", strokeWidth: 2 }} />
      <rect x="395" y="95" width="40" height="40" style={{ fill: "none", stroke: "#30A3DF", strokeWidth: 2 }} />
      <rect x="440" y="95" width="40" height="40" style={{ fill: "none", stroke: "#30A3DF", strokeWidth: 2 }} />
      <rect x="485" y="95" width="110" height="40" style={{ fill: "none", stroke: "#30A3DF", strokeWidth: 2 }} />

      {/* 第四行 */}
      <rect x="5" y="140" width="90" height="40" style={{ fill: "none", stroke: "#30A3DF", strokeWidth: 2 }} />
      <rect x="100" y="140" width="40" height="40" style={{ fill: "none", stroke: "#30A3DF", strokeWidth: 2 }} />
      <rect x="145" y="140" width="40" height="40" style={{ fill: "none", stroke: "#30A3DF", strokeWidth: 2 }} />
      <rect x="190" y="140" width="40" height="40" style={{ fill: "none", stroke: "#30A3DF", strokeWidth: 2 }} />
      <rect x="235" y="140" width="40" height="40" style={{ fill: "none", stroke: "#30A3DF", strokeWidth: 2 }} />
      <rect x="280" y="140" width="40" height="40" style={{ fill: "none", stroke: "#30A3DF", strokeWidth: 2 }} />
      <rect x="325" y="140" width="40" height="40" style={{ fill: "none", stroke: "#30A3DF", strokeWidth: 2 }} />
      <rect x="370" y="140" width="40" height="40" style={{ fill: "none", stroke: "#30A3DF", strokeWidth: 2 }} />
      <rect x="415" y="140" width="40" height="40" style={{ fill: "none", stroke: "#30A3DF", strokeWidth: 2 }} />
      <rect x="460" y="140" width="135" height="40" style={{ fill: "none", stroke: "#30A3DF", strokeWidth: 2 }} />

      {/* 第五行 */}
      <rect x="5" y="185" width="50" height="40" style={{ fill: "none", stroke: "#30A3DF", strokeWidth: 2 }} />
      <rect x="60" y="185" width="40" height="40" style={{ fill: "none", stroke: "#30A3DF", strokeWidth: 2 }} />
      <rect x="105" y="185" width="175" height="40" style={{ fill: "none", stroke: "#30A3DF", strokeWidth: 2 }} /> {/* 合并的矩形 */}
      <rect x="285" y="185" width="40" height="40" style={{ fill: "none", stroke: "#30A3DF", strokeWidth: 2 }} />
      <rect x="330" y="185" width="40" height="40" style={{ fill: "none", stroke: "#30A3DF", strokeWidth: 2 }} />
      <rect x="375" y="185" width="40" height="40" style={{ fill: "none", stroke: "#30A3DF", strokeWidth: 2 }} />
      <rect x="420" y="185" width="40" height="40" style={{ fill: "none", stroke: "#30A3DF", strokeWidth: 2 }} />
      <rect x="465" y="185" width="130" height="40" style={{ fill: "none", stroke: "#30A3DF", strokeWidth: 2 }} />
    </svg>
  );
};



export default function ChippyLoader(props: Props) {
  const width = props.width || defaultChippy.width;
  const height = props.width || defaultChippy.height;
  // const width = 0;
  // const height = 0;
  const containerPadding = width * 0.25;
  // const [containerHeight, containerWidth] = [
  //   height + containerPadding * 2,
  //   width + containerPadding * 2,
  // ];
  const [containerHeight, containerWidth] = [height, width];
  const selectedTheme = useAppSelector(getSelectedTheme);

  return (
    <LoaderContainer>
      <CircleContainer
        $progress={props.progress}
        $progressColor={getDarkenedColor(selectedTheme.accent.c, 0.9)}
        $containerHeight={containerHeight}
        $containerWidth={containerWidth}
      >
        <div
          style={{
            zIndex: 1,
            width: width,
          }}
        >
          <SvgComponent />
        </div>
      </CircleContainer>
    </LoaderContainer>
  );
}
